<!--呼叫显示的页面-->
<template>
    <div :class="WhetherToCall?'InTheDialogue':''">
        <video class="video" ref="myvideo" id="myvideo" muted></video>
        <video class="friendvideo" ref="friendvideo"></video>
        <!--右上角的用户信息-->
        <div class="userInfo pd row">
            <div class="col pr10 tr cf czjz tr">
                <p class="fz30">{{res.name}}</p>
                <p class="mt10">正在等待对方接受邀请...</p>
            </div>
            <img :src="res.userFm" class="userImg">
        </div>
        <!--最下角的操作按钮-->
        <div class="caozuobtn row">
            <div class="col" @click="guaduan">
                <div class="yj hangUp">
                    <i class="ximg cz"></i>
                </div>
                <p class="cf mt15">挂断</p>
            </div>
        </div>
        <dxpeer ref="dxpeer" @answer="answer" :srcObject="srcObject"></dxpeer>
    </div>
</template>
<script>
    import dxpeer from "@/components/dxpeer"
    export default {
        data() {
            return {
                srcObject:'',
                res: '',
                WhetherToCall: false // 是否为通话中
            }
        },
        computed: {

        },
        components: {
            dxpeer
        },
        methods: {
            async getsd() {
                let res = await navigator.mediaDevices.getUserMedia({
                    video: true,
                    audio: true
                })
                this.$refs.myvideo.srcObject = res
                this.srcObject = res
                this.$refs.myvideo.play()
                this.$refs.dxpeer.bohao(this.$route.query.id, res)
            },
            guaduan() {
                this.$refs.dxpeer.guaduan(this.$route.query.id)
            },
            // 对方接听了回调
            answer(se) {
                this.WhetherToCall = true
                this.$refs.friendvideo.srcObject = se;
                this.$refs.friendvideo.play()
            }
        },
        mounted() {
            this.getsd()
            this.res = this.$route.query
        },
    }

</script>
<style scoped>

</style>
